<template>
  <el-form
    ref="queryForm"
    class="single-query"
    :inline="true"
    label-suffix=":"
    @submit.native.prevent>
    <el-form-item
      label=""
      prop="value">
      <div style="display: flex;">
        <div style="width: 140px;">
          <el-select
            v-model="value"
            placeholder="请选择"
            @change="onchange">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </div>
        <div
          v-show="selectItem.type"
          class="marginL18"
          :style="selectItem.style ? selectItem.style : 'width: 140px'">
          <template v-if="selectItem.type=='select'">
            <el-select
              v-model="keywords"
              :clearable="selectItem.multiple === undefined ? true : !selectItem.multiple"
              :collapse-tags="selectItem.multiple === undefined ? false : selectItem.multiple"
              :multiple="selectItem.multiple"
              :placeholder="placeholder">
              <el-option
                v-for="item in selectItem.options"
                :key="item.key"
                :label="selectItem.customKey?item[selectItem.customKey.label]:item.label"
                :value="selectItem.customKey?item[selectItem.customKey.value]:item.value" />
            </el-select>
          </template>
          <template v-if="selectItem.type=='input'">
            <el-input
              v-model.trim="keywords"
              clearable
              :placeholder="placeholder"
              @keyup.enter.native="onSearch" />
          </template>
          <template v-if="selectItem.type=='date'">
            <el-date-picker
              v-model="keywords"
              clearable
              align
              :type="selectItem.dateType|| 'date'"
              style="width:100%"
              value-format="yyyy-MM-dd"
              :placeholder="placeholder"></el-date-picker>
          </template>
        </div>
      </div>
    </el-form-item>
    <div class="btn-group">
      <el-button 
        v-oauth
        data-oauthUuid="1620439502000"   
        @click="onSearch">
        查询
      </el-button>
      <el-button @click="onReset">
        重置
      </el-button>
      <el-button
        type="success"
        @click="onSearch">
        刷新
      </el-button>
    </div>
  </el-form>
</template>
<script>
  export default {
    name: 'QueryForm',
    props: {
      options: {
        type: Array,
        default: () => ({})
      },
      config: {
        type: Object,
        default: () => ({
          'label-suffix': ':',
          'label-width': 'auto'
        })
      },
      isMoreQuery: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        form: {},
        placeholder: null,
        onRefresh: null,
        keywords: null,
        value: null,
        selectItem: {}// 当前选中项
      }
    },
    watch: {
      options() {
        this.value = null
        this.keywords = null
        this.placeholder = null
        this.selectItem = {}
        this.options.forEach(item => {
          this.hasDefaultVal(item)
        })
      }
    },
    mounted() {
      this.options.forEach(item => {
        this.$set(this.form, item.key, item.defaultVal)
        this.hasDefaultVal(item)
      })
    },
    methods: {
      hasDefaultVal(item) {
        if (item.defaultVal) {
          this.$nextTick(() => {
            this.selectItem = item
            this.value = item.value
            this.keywords = item.defaultVal
          })
        }
      },
      onchange(value) {
        const selectItem = this.options.filter(item => {
          return item.key == value
        })
        this.keywords = null
        this.selectItem = selectItem[0]
        this.placeholder = this.selectItem.placeholder
      },
      onReset() {
        this.$refs.queryForm.resetFields()
        this.keywords = null
        for (const i in this.form) {
          if (this.form.hasOwnProperty(i)) {
            this.form[i] = null
          }
        }
        this.onSearch('reset')
      },
      onSearch() {
        this.$emit('query', { [this.selectItem.key]: this.keywords })
      }
    }
  }
</script>
<style  scoped lang="scss">
.marginL18{
  margin-left: 18px;
}
.more-query{
  margin-bottom: 10px;
  .more-row{
    overflow: hidden;
    flex-wrap: wrap;
  }

}
.query-title{
    margin-bottom: 8px;
    margin-top: 0px;
  }
 /deep/  .single-query .el-form-item{
    // width:140px;
  }
  .btn-group{
    &>button{
      margin: 0 2px;
    }
    display: inline-block;
    margin-right: 10px;
  }
  .more-btn-group{
    display: flex;
     &>div{
       &>button{
        margin: 0 2px;
      }
     }
    .right-btn{
      flex-shrink: 0;
       text-align: right;
       &>div{
         display: inline-block
       }
    }
    .left-btn{
      flex-grow: 1;
      text-align: left;
    }
  }

</style>
